import { Ionicons } from '@expo/vector-icons';
import { Stack, useRouter } from 'expo-router';
import React, { useState } from 'react';
import {
  Alert,
  FlatList,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import ConfirmModal from '../components/confirmModal';

type Service = {
  id: string;
  name: string;
  duration: string;
  originalPrice: number;
  discountedPrice: number;
  image?: string;
};

const storeServices: Record<string, Service[]> = {
  '市中心门店': [
    { id: '1', name: '美容护理', duration: '60分钟', originalPrice: 200, discountedPrice: 150, image: 'https://via.placeholder.com/80' },
    { id: '2', name: '按摩放松', duration: '90分钟', originalPrice: 300, discountedPrice: 250, image: 'https://via.placeholder.com/80' },
  ],
  '滨江门店': [
    { id: '3', name: '美甲服务', duration: '45分钟', originalPrice: 100, discountedPrice: 80, image: 'https://via.placeholder.com/80' },
    { id: '4', name: '足疗护理', duration: '60分钟', originalPrice: 180, discountedPrice: 150, image: 'https://via.placeholder.com/80' },
  ],
};

const stores = Object.keys(storeServices);

const ServiceListScreen = () => {
  const router = useRouter();
  const [visible, setVisible] = useState<boolean>(false);
  const [currentStore, setCurrentStore] = useState(stores[0]);
  const [services, setServices] = useState(storeServices[currentStore]);


  const handleDelete = (id: string) => {
    Alert.alert('删除服务', '确定要删除这个服务吗？', [
      { text: '取消', style: 'cancel' },
      {
        text: '删除',
        style: 'destructive',
        onPress: () =>
          setServices((prev) => prev.filter((item) => item.id !== id)),
      },
    ]);
  };

  const handleEdit = (service: Service) => {
    Alert.alert('编辑服务', `这里可以实现编辑功能：${service.name}`);
  };

  const renderItem = ({ item }: { item: Service }) => (
    <View style={styles.card}>
      <Image source={{ uri: item.image }} style={styles.image} />
      <View style={styles.info}>
        <Text style={styles.name}>{item.name}</Text>
        <Text style={styles.duration}>时长: {item.duration}</Text>
        <View style={styles.priceContainer}>
          <Text style={styles.originalPrice}>¥{item.originalPrice}</Text>
          <Text style={styles.discountedPrice}>¥{item.discountedPrice}</Text>
        </View>
        <View style={styles.actionContainer}>
          <TouchableOpacity
            style={styles.editButton}
            onPress={() => handleEdit(item)}
          >
            <Text style={styles.actionText}>编辑</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.deleteButton}
            onPress={() => handleDelete(item.id)}
          >
            <Text style={styles.actionText}>删除</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
      <Stack.Screen
        options={{
          headerTitle: () => (
            <TouchableOpacity onPress={() => {
              setVisible(true);
            }}>
              <Text style={styles.headerStoreText}>{currentStore} ▼</Text>
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity
              onPress={() => {
                router.push("/pages/AddServiceScreen");
              }}
            >
              <Ionicons name="add" size={26} style={{ marginRight: 12 }} />
            </TouchableOpacity>
          ),
        }}
      ></Stack.Screen>

      <FlatList
        data={services}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        contentContainerStyle={{ paddingBottom: 20, paddingTop: 10 }}
      />
      <ConfirmModal
        visible={visible}
        message='您确定切换门店'
        onCancle={() => { setVisible(false) }}
        onConfirm={() => {
          setVisible(false);
        }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f2f5',
    paddingHorizontal: 16,
  },
  headerStoreText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  card: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOpacity: 0.08,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    elevation: 4,
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 12,
    marginRight: 16,
    backgroundColor: '#eee',
  },
  info: {
    flex: 1,
    justifyContent: 'space-between',
  },
  name: {
    fontSize: 18,
    fontWeight: '700',
    marginBottom: 4,
    color: '#333',
  },
  duration: {
    fontSize: 14,
    color: '#888',
    marginBottom: 8,
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  originalPrice: {
    fontSize: 14,
    color: '#aaa',
    textDecorationLine: 'line-through',
    marginRight: 12,
  },
  discountedPrice: {
    fontSize: 16,
    color: '#ff5a5f',
    fontWeight: '700',
  },
  actionContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 12,
  },
  editButton: {
    paddingVertical: 6,
    paddingHorizontal: 16,
    backgroundColor: '#4caf50',
    borderRadius: 8,
  },
  deleteButton: {
    paddingVertical: 6,
    paddingHorizontal: 16,
    backgroundColor: '#f44336',
    borderRadius: 8,
  },
  actionText: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 14,
  },
});

export default ServiceListScreen;